<template>
  <div class="search">
    <div class="input-box">
      <input
        type="text"
        placeholder="搜索歌曲、歌手、专辑"
        v-model="keywords"
        @keyup="inputing"
        @keydown.enter="searching"
      />
      <i class="del" v-show="keywords.length > 0" @click="del"></i>
    </div>
    <div class="line"></div>

    <transition enter-active-class="animate__animated animate__slideInLeft">
      <component
        @play="$emit('play', $event)"
        @changekeyword="changeKeyword"
        :keywords="keywords"
        :is="cname"
      ></component>
    </transition>
  </div>
</template>
<script>
import SearchHot from "@/components/SearchHot";
import SearchSuggest from "@/components/SearchSuggest";
import SearchResult from "@/components/SearchResult";
import _ from "lodash";
export default {
  data() {
    return {
      cname: "SearchHot",
      keywords: "",
    };
  },
  methods: {
    // 输入时防抖
    inputing: _.debounce(function () {
        if (this.keywords.length < 1) {
          this.cname = "SearchHot";
        } else {
          this.cname = "SearchSuggest";
        }
    }, 200),
    searching(event) {
      this.cname = "SearchResult";
      this.setHistory();
      event.target.blur();
    },
    changeKeyword(keyword) {
      
      this.keywords = keyword;
      this.setHistory();
      this.cname = "SearchResult";
    },
    setHistory() {
      let re = localStorage.getItem("searchhistory");
      if (!re) {
        let wordHistory = [];
        wordHistory.push(this.keywords);
        localStorage.setItem("searchhistory", JSON.stringify(wordHistory));
      } else {
        let wordHistory = JSON.parse(re);
        wordHistory.push(this.keywords);
        for (let i = 0; i < wordHistory.length; i++) {
          for (let j = i + 1; j < wordHistory.length; j++) {
            if (wordHistory[i] == wordHistory[j]) {
              wordHistory.splice(j, 1);
              j--;
            }
          }
        }
        localStorage.setItem("searchhistory", JSON.stringify(wordHistory));
      }
    },
    del() {
      this.keywords = "";
      this.cname = "SearchHot";
    },
  },
  components: {
    SearchHot,
    SearchSuggest,
    SearchResult,
  },
};
</script>
<style lang="less" scoped>
.search {
  .input-box {
    margin: 15px 10px;
    background: #eee;
    padding-left: 9px;
    border-radius: 15px;
    align-items: center;
    position: relative;
    &::before {
      content: "";
      background: url()
        no-repeat;
      display: inline-block;
      width: 13px;
      height: 13px;
    }
    input {
      flex: 1;
      line-height: 30px;
      height: 30px;
      overflow: hidden;
      padding-left: 5px;
      background-color: transparent;
      border: 0;
      outline: none;
      color: #333;
      &::-webkit-input-placeholder {
        color: #ccc;
      }
      &::-moz-input-placeholder {
        color: #ccc;
      }
      &::-ms-input-placeholder {
        color: #ccc;
      }
    }
    .del {
      background-image: url();
      position: absolute;
      width: 12px;
      height: 12px;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  div.line {
    border-bottom: 2px solid #eee;
    margin-bottom: 13px;
  }
}
</style>